<template>
	<view class="content">
		<!-- 顶部导航栏 -->
		<view class="top-bar">
			<view class="top-bar-left" @tap="backOne">
				<image src="@/static/images/common/back.png" class="back-img"></image>
			</view>
			<view class="top-bar-center title">
				<view class="title">群名</view>
			</view>
			<!-- 占位标签 -->
			<view class="top-bar-right pice">
				<view class="pice"></view>
				<view class="group-img">
					<image src="../../static/images/img/self.jpg"></image>
				</view>
			</view>
		</view>
		<scroll-view class="chat" scroll-y="true" scroll-with-animation="true" :scroll-into-view="scrollToView">
			<view class="chat-main" :style="{paddingBottom:inputHeight+'px'}">
				<view class="chat-ls" v-for="(item,index) in msgs" :key="index" :id="'msg'+item.tip">
					<view class="chat-time" v-if="item.time != ''">{{changeTime(item.time)}}</view>
					<view class="msg-m msg-left" v-if="item.id != 'b'">
						<image :src="item.imgurl" class="user-img"></image>
						<view class="message" v-if="item.types == 0">
							<view class="msg-text" >{{item.message}}</view>
						</view>
						<view class="message" v-if="item.types == 1">
								<image :src="item.message" class="msg-img" mode="widthFix" @tap="previewImg(item.message)"></image>
						</view>
					</view>
					
					<!-- <view class="chat-time" v-if="item.time != ''">{{changeTime(item.time)}}</view> -->
					<view class="msg-m msg-right" v-if="item.id == 'b'">
						<image :src="item.imgurl" class="user-img"></image>
						<view class="message" v-if="item.types == 0">
							<view class="msg-text" >{{item.message}}</view>
						</view>
						<view class="message" v-if="item.types == 1">
								<image :src="item.message" class="msg-img" mode="widthFix" @tap="previewImg(item.message)"></image>
						</view>
					</view>
				</view>
				
			</view>
			<!-- 用于底部安全距离 -->
			<view class="bottonDiv"></view>		
		</scroll-view>
		<submit @inputs="inputs" @heights="heights"></submit>
	</view>
</template>

<script>
	import datas from "@/commons/js/datas.js"
	import myfun from "@/commons/js/myFun.js"
	import submit from "@/components/submit/submit.vue"
	export default {
		data() {
			return {
				msgs:[],   //聊天数据
				imgMsg:[],	//照片
				oldTime:new Date(),		//时间间隔处理
				scrollToView:'', 	//聊天页面默认滚动到最后底部
				inputHeight:'60',		//
			}
		},
		onLoad:function(){
			this.getMsg();
		},
		components:{
			submit,			//聊天发送组件
		},
		methods: {
			//返回上一个页面
			backOne:function(){
				uni.navigateBack({
					delta:1   //返回一层
				});
			},
			//聊天数据获取
			getMsg:function(){
				let msg = datas.message();
				for(var i = 0;i < msg.length;i++){
					msg[i].imgurl = '../../static/images/img/'+msg[i].imgurl;
					//时间间隔
					if(i<msg.length-1){
						let t = myfun.spaceTime(this.oldTime,msg[i].time);
						// console.log(t);
						if(t){
							this.oldTime = t;
							
						}
						msg[i].time = t;
					}
					
					//补充图片地址
					if(msg[i].types == 1){
						msg[i].message = '../../static/images/img/' + msg[i].message;
						this.imgMsg.unshift((msg[i].message));
					}
					this.msgs.unshift(msg[i]);
				}
				// console.log(this.msgs[0].imgurl)
				this.$nextTick(function(){
					this.scrollToView = 'msg'+this.msgs[i-1].tip;
				})
			},
			//处理时间
			changeTime:function(date){
				return myfun.chatTime(date);
			},
			//预览图片
			previewImg:function(e){
				let index = 0;
				for(let i = 0;i<this.imgMsg.length;i++){
					if(this.imgMsg[i] == e){
						index = i;
					}
				}
				uni.previewImage({
					current:index,
					urls: this.imgMsg,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			//接收输入的内容
			inputs:function(e){
				let len = this.msgs.length;
				let data = {
					id:'b',
					imgurl:'../../static/images/img/one.png',
					message:e,
					types:0,
					time:new Date(),
					tip:len,
				}
				// console.log(e);
				this.msgs.push(data);
				this.$nextTick(function(){
					this.scrollToView = 'msg' + len;
				})
			},
			//获取submit组件页面高度
			heights:function(e){
				// console.log('高度'+e)
				this.inputHeight = e;
				this.goBottom();
			},
			//滚动到底部
			goBottom:function(){
				this.scrollToView = '';
				this.$nextTick(function(){
					let len = this.msgs.length-1;
					this.scrollToView = 'msg' + this.msgs[len].tip;
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "@/commons/css/mycss.scss";
	page{
		height: 100%;
	}
	.content{
		height: 100%;
		background-color: rgba(244,244,244,1);
	}
	.top-bar{
		background-color: rgba(244,244,244,0.96);
		border-bottom:1px solid $uni-border-color;
		.group-img{
			position: absolute;
			bottom: 10rpx;
			right: $uni-spacing-col-base;
			width: 68rpx;
			height: 68rpx;
			image{
				width: 68rpx;
				height: 68rpx;
				border-radius: 16rpx;
			}
		}
	}
	.chat{
		// 底部安全距离
		.bottonDiv{
			height: var(--status-bar-height);
			width: 100%;
		}
		height: 100%;
		.chat-main{
			padding-left: $uni-spacing-col-base;
			padding-right: $uni-spacing-col-base;
			padding-top: 100rpx;
			display: flex;
			flex-direction: column;
		}
		.chat-ls{
			.chat-time{
				font-size: $uni-font-size-sm;
				color: rgba(39,40,50,0.3);
				line-height: 3rpx;
				padding: 20rpx 0;
				text-align: center;
			}
			.msg-m{
				display: flex;
				padding: 20rpx 0;
				.user-img{
					flex: none;
					width: $uni-img-size-sm;
					height: $uni-img-size-sm;
					border-radius: $uni-border-radius-base;
				}
				.message{
					flex: none;
					max-width: 480rpx;
				}
				.msg-text{
					font-size: $uni-font-size-lg;
					color:$uni-text-color;
					line-height: 44rpx;
					padding: 18rpx 24rpx;
				}
				.msg-img{
					max-width: 400rpx;
					border-radius: $uni-border-radius-base;
				}
			}
			.msg-left{
				flex-direction: row;
				.msg-text{
					margin-left: 16rpx;
					background-color: #fff;
					border-radius: 0 20rpx 20rpx 20rpx;
				}
				.msg-img{
					margin-left: 16rpx;
				}
			}
			.msg-right{
				flex-direction: row-reverse;
				.msg-text{
					margin-right: 16rpx;
					background-color: #fff260;
					border-radius: 20rpx 0 20rpx 20rpx;
				}
				.msg-img{
					margin-right: 16rpx;
				}
			}
		}
	}

</style>
